<script setup lang="ts">
import { computed } from 'vue'

defineOptions({
  name: 'ItemFourItem',
})

const props = defineProps<{
  img: string
  title: string
  value: number | string
  ratio: number
}>()

const ratioClass = computed(() => {
  return props.ratio > 0 ? 'text-green-500' : 'text-red-400'
})
</script>

<template>
  <div class="flex items-center">
    <div class="item-icon ml-4 mr-1 h-24 w-24 flex-shrink-0">
      <img :src="img" class="h-10 w-8">
    </div>
    <div class="ml-3 mt-3 flex flex-auto flex-col">
      <div class="text-[#C0E7FF] opacity-80">
        {{ title }}
      </div>
      <div class="text-lg text-[#18DEF5] font-pmzd">
        {{ Number.isFinite(value) ? value.toLocaleString() : '-' }}
      </div>
      <div class="item-text flex items-center whitespace-nowrap text-sm opacity-80">
        <span class="text-[#C0E7FF] font-italic">同比{{ ratio > 0 ? '上涨' : '下降' }}</span>
        <span :class="ratioClass" class="mx-1 font-mono">{{ Math.abs(ratio) }}%</span>
        <span :class="ratioClass">{{ ratio > 0 ? '↑' : '↓' }}</span>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.item-icon {
  background: url('./item-four-icon-bg.png') no-repeat;
  background-size: cover;
  img {
    margin: 32px 10px 20px 38px;
  }
}
.item-text {
  background: linear-gradient(90deg, rgba(46,137,250,0) 0%, rgba(46,137,250,0.3) 48%, rgba(46,137,250,0) 100%);
}
</style>
